<template>
  <div class="note-container" v-if="examStore.currQuestion.showAnswer">
    <shadowHeader :title="'我的笔记'" :rightLable="'写笔记'" :current="6"> </shadowHeader>
    <div class="note-list">
      <div v-for="(note, index) in editorStore.list[6]" :key="index" class="note-item">
        <div class="note-content" v-html="note.content"></div>
        <div class="note-footer">
          <span class="note-time">{{ formatDate(note.create_time) }}</span>
          <button class="delete-btn" @click="editorStore.handelDelComment(note.id, 6)">
            删除笔记
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import shadowHeader from "~/components/shadowHeader.vue";
import { formatDate } from "@/utils/index.js";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();
import { userEditorStore } from "@/stores/editor.js";
const editorStore = userEditorStore();

const props = defineProps({
  title: {
    type: String,
    default: "我的笔记",
  },
});

watch(
  () => examStore.currQuestion.id,
  () => {
    editorStore.getCommentListFn(6);
  },
  { immediate: true }
);

// watch(
//   () => editorStore.EditorComponents[editorStore.current],
//   (val) => {
//     if(!val){
//       getCommentListFn();
//     }
//   },
//   {
//     immediate: true,
//   }
// );
</script>

<style lang="scss" scoped>
.note-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
  .note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .note-title {
      font-size: 18px;
      font-weight: 500;
      color: #000;
    }

    .write-btn {
      padding: 6px 12px;
      border-radius: 4px;
      // border: 1px solid ;
      border: 1px solid #126983;
      color: #126983;
      background: transparent;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;

      &:hover {
        background: rgba(33, 150, 243, 0.1);
      }
    }
  }

  .note-list {
    .note-item {
      margin-bottom: 20px;
      // padding-bottom: 20px;
      // border-bottom: 1px solid #f0f0f0;

      &:last-child {
        margin-bottom: 0;
        border-bottom: none;
      }

      .note-content {
        color: #000;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 10px;
      }

      .note-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .note-time {
          color: #999999;
          font-weight: 400;
          font-size: 14px;
        }

        .delete-btn {
          color: #ff4d4f;
          background: transparent;
          border: none;
          cursor: pointer;

          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 19.6px;
          text-align: left;
          text-decoration-line: underline;
          text-decoration-style: solid;
          text-underline-position: from-font;
          text-decoration-skip-ink: auto;

          &:hover {
            // color: darken(#ff4d4f, 10%);
          }
        }
      }
    }
  }
}
</style>
